<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>调拨记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" label-width="90px" style="width: 100%">
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="单据号/备注"
              clearable
            />
          </el-form-item>

          <!-- 时间范围选择 -->
          <el-form-item label="日期：">
            <el-date-picker v-model="searchForm.dateRange" type="datetimerange" range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" style="width: 340px" clearable />
          </el-form-item>

          <!-- 业务人员 -->
          <el-form-item label="业务人员：">
            <el-select style="width: 200px" v-model="searchForm.staffId">
              <el-option label="请选择" value="" />
              <el-option label="仓库-小衣" value="S1001" />
              <el-option label="仓库-小三" value="S1003" />
              <el-option label="仓库-小五" value="S1005" />
              <el-option label="仓库-小七" value="S1007" />
              <el-option label="仓库-小九" value="S1009" />
            </el-select>
          </el-form-item>

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 分割线 -->
      <el-divider style="margin: 10px 0" />

      <!-- 操作按钮 -->
      <div style="margin-bottom: 15px; text-align: right;">
        <el-button type="primary" size="small" @click="toAddAllotView()">新增</el-button>
        <el-button type="success" size="small" @click="toAddAllotView()">审核</el-button>
        <el-button type="info" size="small" @click="toAddAllotView()">反审核</el-button>
        <el-button type="danger" size="small" @click="deleteAllotOrder()">删除</el-button>
      </div>

      <!-- 表格 -->
      <el-table ref="allotListTable" :data="allotList" style="width: 100%" border>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="单据编号" width="200" align="center" />
        <el-table-column prop="createdTime" label="单据时间" width="180" align="center" />                                                                                                                                                                                                                                                                                                                                                                                                                                   
        <el-table-column prop="staffName" label="工作人员" width="170" align="center" />
        <el-table-column prop="auditorName" label="审核人员" width="170" align="center" />
        <el-table-column prop="status" label="状态" width="150" align="center">
          <template #default="scope">
            {{showInboundStatus(scope.row.status) }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="180" align="center">
          <template #default="scope">
            <el-button link type="warning" size="small" @click="editRow(scope.row)">
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: center;" v-if="pageInfo">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="pageInfo.total"
          @current-change="changePage"
          layout="total, ->, prev, pager, next, jumper"
          background
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject} from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter} from 'vue-router'

let axios = inject('axios');
let router = useRouter();
let loading = ref(false);
//跳转到新增路由
function toAddAllotView() {
  router.push({
    name: 'editAllot',
  })
}

// 搜索表单
const searchForm = ref({
  keyword: '',
  dateRange: [],
  staffId: '',
})

// 分页数据
const pageNum = ref(1);
const pageSize = ref(10)
const currentPage = ref(1)
let pageInfo = ref(null);

// 调拨列表数据
const allotList = ref([])


const showInboundStatus = (status) => {
  let res = '';
  switch (status) {
    case 0: res = "已打回"; break;
    case 1: res = "已创建"; break;
    case 2: res = "已提交"; break;
    case 3: res = "已审核"; break;
  }
  return res;
}



// 初始化数据
onMounted(() => {
  onSubmit();
})

// 查询
const onSubmit = () => {
  if (loading.value) return;
  loading.value = true;

  console.log(searchForm.value);
  axios.post('/xyy/allot/page', {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    // companyCode: company,
    //搜索表单中的信息
    keyword: searchForm.value.keyword,
    beginTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[0],
    endTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[1],
    type: searchForm.value.type,
    staffId: searchForm.value.staffId
  }).then(res => {
    pageInfo.value = res.data.pageInfo;
    allotList.value = res.data.pageInfo ? res.data.pageInfo.list : null
    console.log("pageInfo---:", pageInfo);
  }).finally(() => {
    loading.value = false;
  })
}

const changePage = (now) => {
  pageNum.value = now;
  onSubmit();
}


// 编辑行
const editRow = (row) => {
  router.push({name: 'editAllot', params: {id: row.id}})
}

// 删除单行
const deleteRow = (index) => {
  ElMessageBox.confirm('确定删除此调拨单？', '提示', {
    type: 'warning'
  }).then(() => {
    allotList.value.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {})
}

// 删除选中所有
const deleteAllotOrder = () => {
  const selection = ref(this.$refs.allotListTable).getSelectionRows()
  if (selection.length === 0) {
    ElMessage.warning('请先选择要删除的记录')
    return
  }
  ElMessageBox.confirm(`确定删除选中的 ${selection.length} 条记录？`, '提示', {
    type: 'warning'
  }).then(() => {
    selection.forEach(row => {
      const idx = allotList.value.findIndex(item => item.id === row.id)
      if (idx > -1) allotList.value.splice(idx, 1)
    })
    ElMessage.success('删除成功')
  }).catch(() => {})
}



</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}


.topNav {
  margin-bottom: 20px;
}


.cell-item {
  font-weight: bold;
}

.margin-top {
  margin-top: 10px;
}

</style>